/* styles.css */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #353535; 
	overflow: hidden;
}
/* .login-html {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #353535; 
	overflow: hidden;
} */

.centered-rectangle {
	 background-color: hsla(40, 0%, 74%, 0.5);
	padding: 0px; /* 内边距，可根据需求调整 */
	margin-bottom: 50px;
	border-radius: 8px; /* 圆角边框，使矩形更显柔和 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果，增加立体感 */
	text-align: center; /* 文本居中 */
	width: 350px; /* 矩形宽度，可根据需求调整 */
	height: 440px; /* 矩形宽度，可根据需求调整 */
	  /* 创建一个内阴影，模拟深度 */
	  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
	  
	 
	  
	  /* 实际边框，可以是任何颜色和宽度 */
	  border: 2px solid hsla(20, 1%, 88%, 0.5);
	  
	  /* 可选：为边框添加圆角 */
	  border-radius: 8px;
}
 /* 使用伪元素添加高光效果 */
.centered-rectangle::before {
	    content: '';
	    position: absolute;
	    top: -6px; /* 调整高光位置 */
	    left: -6px;
	    right: -6px;
	    bottom: -6px;
	    border-radius: 10px; /* 根据需要调整圆角 */
	    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	    filter: blur(4px); /* 模糊效果使高光更柔和 */
	    z-index: -1; /* 确保伪元素在背景之下 */
	  }
.avatar-container {
	width: 110px; /* 头像宽度，可以根据需要调整 */
	height: 110px; /* 头像高度，与宽度保持一致以形成圆形 */
	position: relative;
	top: -20px;
	left: 100px;
}
 
.avatar {
   width: 150px; /* 头像宽度，可以根据需要调整 */
   height: 130px; /* 头像高度，与宽度保持一致以形成圆形 */
    object-fit: cover; /* 保持图像比例，裁剪以适应容器 */
	position: relative;
}

.wrapper-button{
	position: relative;
	top: -15px;
}
.wrapper-button button{
	width: 250px;
	height: 60px;
	line-height: 60px; /* 与按钮高度相同 */
	border-radius: 30px;
	align-items: center; 
	border: #d0d0d0;
	text-align: center; /* 右对齐 */
	justify-content: center;
	background-color: #ffffff;
	font-size: 16px;
	color: #ffffff;
	background-color: #e3b65a;
	font-weight: bold;
}

.contact-info{
	height: 70px;
	background-color: #ffffff;
	border-radius: 2px;
	margin-left:20px;
	width: 280px;
	position: relative;
	top: -30px;
	font-size: 15px;
	text-align: left;
	text-indent: 1em;
	color: black;
}
.contact-info2{
	height: 70px;
	background-color: #ffffff;
	border-radius: 2px;
	margin-left:20px;
	width: 280px;
	position: relative;
	top: -30px;
	font-size: 15px;
	text-align: left;
	text-indent: 1em;
	color: black;
}
.contact-info3{
	background-color: #ffffff;
	height: 70px;
	border-radius: 2px;
	margin-left:20px;
	width: 320px;
	position: relative;
	top: -30px;
	font-size: 15px;
	text-align: left;
	text-indent: 1em;
	color: black;
}
.avatar-icon{
	 display: inline; /* 这通常是默认的，但明确设置可以避免意外 */
	 position: relative;
	 top: 20px;
	 left: -130px;
	 z-index: 10;
}
.avatar-icon image{
	width: 18px;
	border-radius: 4px;
	height: 18px;
}
input {
    padding-left: 40px; /* 将输入框内部的左侧空间设置为20像素 */
}
.avatar-eyes{
	display: inline-block; /* 这通常是默认的，但明确设置可以避免意外 */
	position: relative;
	top: -100px;
	left: 130px;
	z-index: 10;
	width: 70px;
	height: 70px;
	line-height: 30px;
}
.avatar-eyes image{
	width: 20px;
	height: 20px;
}
.container {
  position: relative;
  left: -110px;
  top: -10px;
}
.checkbox-item {
  display: block;
  margin-bottom: 10px;
  color: #ececec;
}
.redio-info{
	position: relative;
	top: -40px;
}
.radio{
	color: #ffffff;
}